<template>
  <div class="Ceav_eavlate_content clearfix">
    <h5 class="Ceav_content_title title">请对雇主进行评价</h5>
    <section class="Ceav_content_title conent dip">
      <div class="task_Details_ifon dip ju_al_lf">
        <span class="task_Details_ifonimgBox dip ju_al_lf">
          <img :src="useraccess.picture" alt="" class="task_Details_ifonimg">
        </span>
        <span class="user_IFON_CYS dip ju_al_lf">  
          <i class="wINGFH" v-if="useraccess.nickName != ''">{{useraccess.nickName}}</i>
          <i class="wINGFH" v-else-if="useraccess.name != ''">{{useraccess.name}}</i>
          <i class="wINGFH" v-else>{{useraccess.phoneNumber}}</i>
        </span> 
      </div>
    </section>
    <div class="grade-box dip ju_al">
      <div v-for="(star,indexs) in stars" :key="indexs" class="grade-box-child"  @click="rating(indexs)" >
        <img :src="star.src" alt="星星图片"  class="grade-box-img"/>        
      </div>
    </div>
    <ul class="dipW ju_al_bet eavl_tea_conttext clearfix">
      <li class="eavl_tea_childtext bdr" v-for="(lists,index) in eavlc" :key="index" :class="{'eavl_tea_childactive':lists.ind}" @click="getblobk(index)">{{lists.text}}</li>
    </ul>
    <p class="text_order_diap">(评价后佣金才会打到您的账户)</p>
    <div class="bord_post">
      <button class="ORder_detilas_Negotiate bdr" :class="{'Negacitve':this.Negactive}" @click="getPosteavlate()">提交</button>
    </div>
  </div>
</template>
<script>
var starOffImg = './static/images/Order/huo.png'
var starOnImg  = './static/images/Order/qina.png'
export default {
  data(){
    return{
      useraccess:'',
      eavlc:[
        { text: "温文尔雅",ind: false },
        { text: "合作愉快",ind: false },
        { text: "沟通顺利",ind: false },
        { text: "人美心善",ind: false },
        { text: "人格魅力",ind: false },
        { text: "中国好雇主",ind: false },
        { text: "寻求清晰",ind: false },
        { text: "江湖再见",ind: false },
        { text: "通情达理",ind: false }
      ],
      stars: [
        {
          src: starOffImg,
          active: false
        }, {
          src: starOffImg,
          active: false
        }, {
          src: starOffImg,
          active: false
        },
        {
          src: starOffImg,
          active: false
        }, {
          src: starOffImg,
          active: false
        }
      ],
      ind:'',
      demandId:'',
      starNum: 0, //统计星星的数量
      Negactive:false, //点击变色
    }
  },
  methods:{
    getblobk(index){ //获取文字
      this.eavlc[index].ind = !this.eavlc[index].ind    
      var arr = [];      
      for(var i =0;i<this.eavlc.length;i++){
        if(this.eavlc[i].ind){
          arr.push(i)
        }
      }
      if(arr.length >=5){
        alert('评价标签最多只能评价四个')
        this.eavlc[index].ind = false
      }else{
        this.ind = arr
      }
    },
    rating(index){ 
      var total = this.stars.length; //星星总数
      var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量
      //进入if说明页面为初始状态
      if(this.starNum == 0) {
          this.starNum = idx;
          for(var i = 0; i < idx; i++) {
            this.stars[i].src = starOnImg;
            this.stars[i].active = true;
          }
      } else {
        //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
        if(idx == this.starNum) {
            for(var i = index; i < total; i++) {
              this.stars[i].src = starOffImg;
              this.stars[i].active = false;
            }
        }
        //如果小于当前最高星级，则直接保留当前星级
        if(idx < this.starNum) {
            for(var i = idx; i < this.starNum; i++) {
                this.stars[i].src = starOffImg;
                this.stars[i].active = false;
            }
        }
        //如果大于当前星级，则直接选到该星级
        if(idx > this.starNum) {
            for(var i = 0; i < idx; i++) {
                this.stars[i].src = starOnImg;
                this.stars[i].active = true;
            }
        }

        var count = 0; //计数器-统计当前有几颗星
        for(var i = 0; i < total; i++) {
            if(this.stars[i].active) {
                count++;
            }
        }
        this.starNum = count;
      }
      console.log(this.starNum)
    },
    getPosteavlate(){
      this.$store.dispatch('showloader')
      this.Negactive = true
      var ind = this.ind.length != '' ? this.ind : null
      if(this.starNum >= 1){
        // console.log(ind,this.starNum,this.demandId)
        this.axios.post(this.$busPoat.assess(),{
          "demandId":this.demandId,
          "stars":this.starNum,
          "commentContent":ind
        }).then(res =>{
          var st;
          clearTimeout(st)
          st = setTimeout(() =>{
            if(res != null || res != undefined){
              this.$store.dispatch('hideloader')              
              // console.log(res)
              if(res.data.iplancode == 200){
                this.$router.replace({
                  path:'/bomNav/Ordershuo'
                })
              }else{
                alert('亲,您已评价过该商家')
                this.$router.replace({
                  path:'/bomNav/Ordershuo'
                })
              }
            }else{
              this.$store.dispatch('hideloader')              
              alert('请求加载过慢...')
            }
            clearTimeout(st)                                                                       
          },2000)
        }).catch(error=>{
          this.$store.dispatch('hideloader')          
          alert('评价发表失败')
          console.log(error)
        })
      }else{
        alert('亲，请评价商家，评价星星必填哦')
      }
      
    }
  },
  created(){
    this.useraccess = JSON.parse(sessionStorage.getItem('publishUserORrer')) 
    this.demandId = sessionStorage.getItem('demandId')
    // console.log(this.useraccess)
  },
  beforeRouteLeave (to, from, next) {
    if(sessionStorage.getItem('Router') != null ){
      next({ path: '/bomNav/taskContent' })
    }else {
      next();
    }
  }

}
</script>
<style lang="scss" scoped>
.Ceav_eavlate_content{
  padding-top:.2rem;
  width: 100%;
  background: #fff;
  font-size: .24rem;
  font-weight: 600;
  .Ceav_content_title{
    text-align: center;
    width: 100%;
    padding:0rem .4rem;
    border-bottom:.02rem solid #f2f2f2;
  }
  .title{
    height: 0.86rem;
    line-height: .86rem;
    color:#ff7200;
  }
  .conent{
    height: 1.2rem;
  }
}
.task_Details_ifon{
  width: 100%;
  height: 1.12rem;
  // border-bottom:.02rem solid #f2f2f2;
  .task_Details_ifonimgBox{
    height: 100%;
    width: 16.1%;
    .task_Details_ifonimg{
      width: 0.8rem;
      height: 0.8rem;
        -webkit-border-radius:50%;
          -moz-border-radius:50%;
                border-radius:50%;
    }
  }
  .user_IFON_CYS{
    width: 100%;
    height: 50%;
    .wINGFH{
      // width: 1rem !important;
      // height: 100%;
      padding-right:.3rem;
      font-size: .24rem;
      margin-left: .26rem;
      font-weight: 600;
    }
    .User_dig{
      border:.02rem solid #FF7200;
      padding:.1rem;
      color:#FF7200;
      font-size: .24rem;
    }
  }
}
.eavl_tea_conttext{
  width: 100%;
  padding:.6rem .4rem 0rem;
  font-weight: 500;
  .eavl_tea_childtext{
    padding:.1rem;
    border:.02rem solid #f2f2f2;
    font-size:.18rem;
    color:#DEDEDE;
    margin-bottom:.3rem;
  }
  .eavl_tea_childactive{
    color:#ff7200;
    border:.02rem solid #ff7200;
  

  }
}
.text_order_diap{
  width: 100%;
  font-weight: 500;
  padding:.1rem 0rem;
  text-align: center;
  font-size: .2rem;
  color:#DEDEDE;
}
.grade-box{
  width: 100%;
  padding-top:.7rem;
  .grade-box-child{
    width: 0.34rem;
    height: 0.34rem;
    margin:.3rem;
  }
  .grade-box-img{
    width: 100%;
    height: 100%;
  }
}
.bord_post{
  width: 100%;
  padding:.3rem .2rem .1rem;
}
.ORder_detilas_Negotiate{
  width: 100%;
  height: 1rem;
  background: #FF7200;
  text-align: center;
  line-height: 1rem;
  color:#fff;
  font-size: .3rem;
}
.Negacitve{
  background: #e56600;
}
</style>
